<template>
	<div class="videoContainer" v-loading="loading" style="width:100%" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-row>
				<el-col :span="6">
					<div @mouseenter="openSubject" @mouseleave="closeSubject">
						<div class="currentTitle">{{ currentGrade }}{{ currentSubject }}</div>
						<el-collapse-transition>
						<div class="subject" v-if="showAllsubject">
							<div v-for="(item,$index) in subjectList">
								<p>{{ item.name }}</p>
								<div v-for="(x,index) in item.list" @click="chooseSubject($index,index)" :title="x.name">
									{{ x.name }}
								</div>
							</div>
						</div>
						</el-collapse-transition>
					</div>
				<div class="knowledge">
					<p>章节选择</p>
					<el-tree :data="treeData" :props="defaultProps" @node-click="chooseKnowledge"></el-tree>
				</div>
			</el-col>
			<el-col :span="18" class="right">
				<div class="content">
					<div v-for="(item,index) in videoList">
						<div @click="playVideo(item)">
							<img :src="item.imageurl" alt="" />
						</div>
						<p :title="item.small">{{ item.small }}</p>
					</div>
				</div>
				<el-pagination class="pagination" background layout="prev, pager, next" :page-size="15" :current-page="page" :total="count" @current-change="changePage"></el-pagination>
			</el-col>
			</el-row>				
	</div>
</template>
<script>
	import api from '../../api'
	import { mapState, mapMutations } from 'vuex'
	export default{
		data(){
			return {
				loading: true,
				defaultProps: {
					children: 'list',
					label: 'name'
				},
				subjectList: [],
				currentGrade: '',
				currentSubject: '',
				showAllsubject: false,
				treeData:[],
				catrgory_id:'',
				type_id:'',
				pagesize:15,
				page:1,
				count:0,
				videoList:[]
			}
		},
		computed:{
			...mapState(["userlogin"])
		},
		created(){
			var that=this
			this.INIT_STATE();
			api.getVideoKnowledges(1).then(response=>{
				
				that.subjectList=response.data.return.classify;
				//默认选中第一个
				that.treeData=that.subjectList[0].list[0]
				that.currentGrade=that.subjectList[0].name
				that.currentSubject=that.subjectList[0].list[0].name
				that.loading=false
				that.catrgory_id=that.subjectList[0].list[0].list[0].list[0].id;
				that.type_id=that.subjectList[0].list[0].list[0].list[0].type;
				that.getVideoList()
			})
		},
		methods:{
			...mapMutations(["INIT_STATE"]),
			openSubject() {
				this.showAllsubject = true;
			},
			closeSubject() {
				this.showAllsubject = false;
			},
			chooseSubject($index, index) {
				
				this.currentGrade=this.subjectList[$index].name;
				this.currentSubject=this.subjectList[$index].list[index].name
				this.treeData=this.subjectList[$index].list[index]
				this.chooseKnowledge(this.subjectList[$index].list[index])
			},
			chooseKnowledge(data){
				
				this.loading=true
				this.catrgory_id=data.id;
				this.type_id=data.type;
				this.getVideoList()
			},
			getVideoList(){
				var that=this
				api.getVideoList(this.catrgory_id,this.type_id,this.pagesize,this.page).then(response=>{
					that.count=Number(response.data.count)
					that.videoList=response.data.videolist
					
				})
			},
			changePage(id){
				this.page=id;
				this.loading=true
				this.getVideoList()
			},
			playVideo(item){
				api.getVideoDetail(item.id).then(response=>{		
						var s=window.location.href.replace('/video/1',`/playVideo/${response.data.return.ccid}/1`)
//						window.open(s)
					this.$router.push({path:`/playVideo/${response.data.return.ccid}/1`})
				})
			}
		},
		watch:{
			videoList:function(){
				this.$nextTick(function () {
  				this.loading=false
  			})
			}		
		}
	}
</script>

<style scoped>
	iframe{
		width: 100%;
		height: 700px;
		frameborder:0;
		border: none;
	}
	.videoContainer{
		min-height: 600px;
	}
	.currentTitle {
		background-color: #14acf4;
		color: white;
		font-size: 16px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: default;
		transition: all 0.5s;
	}	
	.subject {
		cursor: default;
		border-bottom: 1px dashed #999999;
		padding-bottom: 22px;
		margin-bottom: 16px;
	}	
	.subject>div {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-bottom: 10px;
	}
	
	.subject>div>p {
		width: 100%;
		margin: 7px auto;
		color: #14acf4;
		font-size: 18px;
	}	
	.subject>div>div {
		width: 25%;
		font-size: 14px;
		margin-top: 4px;
		margin-bottom: 4px;
		overflow: hidden;
		height: 18px;
	}
	.subject>div>div:hover{
		color: #14acf4;
	}
	.knowledge>p{
		margin-top: 8px;
		font-size: 14px;
		font-weight: bold;
	}
	.tree{
		color:#999999;
	}
	.tree>.treeitem .el-tree-node__label{
		color: #14acf4;
	}
	.el-col.el-col-6{
		margin-top: 2px;
	}
	.right{
		cursor: default;
		position: relative;
	}
	.right:before{
		content: '';
		display: block;
		position: absolute;
		left: -2px;
		height: calc(100% - 32px);
		width: 2px;
		top: 42px;
		background-color: #F2F2F2;
	}
	.right .content{
		/*display: flex;*/
		/*flex-wrap: wrap;*/
		/*justify-content: space-around;*/
	}
	.right .content>div{
		float: left;
		margin-top: 20px;
		width: 208px;
		height: 185.25px;
		cursor: pointer;
		margin-top: 24px;
		margin-right: 24px;
		
	}
	.right .content>div:hover{
		color:#14ACF4;
		cursor: pointer;
	}
	.right .content>div:nth-of-type(3n-2){
		margin-left: 38px;
	}
	.right .content>div:nth-of-type(3n){
		margin-left: 0;
		margin-right: 38px;
	}
	.right .content>div>p{
		margin-top: 8px;
		font-size: 14px;
		height: 16px;
		overflow: hidden;
	}
	.right .content>div>div{
		width: 100%;
		height: 156px;
		background-color: grey;
	}
	.right .content>div>div>img{
		width: 100%;
		height: 100%;
	}
	.pagination{
		float: right;
		margin-top: 40px;
		padding-bottom: 40px;
	}
</style>